import {Component} from 'react'
import { Table, Switch , Space,message,Pagination  } from 'antd';
import {Link} from 'react-router-dom'
import AcMaTop from "../../components/hanqun/AcMaTop";
import './AccountManage.css';
import axios from 'axios'
import {inject,observer} from "mobx-react";

@inject('jurisdiction')
@observer
class AccountManage extends Component{
    constructor(props) {
        super(props);
        this.state = {
            selectedRowKeys: [], // Check here to configure the default column
            loading: false,
            tableData:[],
            isOperation: false,
            current:1,    //当前页
            switchArr:[],
            pageSize:0, //每页条数
            totalPage:0,    //总页数
        };
    }
    //选择项改变
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({
            selectedRowKeys:selectedRowKeys
        },()=>{
            if(this.state.selectedRowKeys.length>0){
                this.props.jurisdiction.able()
            }else {
                this.props.jurisdiction.disable()
            }
            this.setState({
                isOperation: this.props.jurisdiction.isOperation
            })
        });


    };
    componentWillMount() {
       this.getTableList();
    };
    //获取所有数据
    getTableList(num){
        console.log('23',num);
        axios.get('/api/admin/admin/page',{
            params:{
                page:num?num:1
            }
        }).then((res)=>{
            console.log('res',res.data);
            var data = res.data.data;
            var list = res.data.data.list;
            this.setState({
                pageSize:data.pageSize,
                current: data.pageNum,
                totalPage:data.total
            },()=>{
                console.log(this.state.totalPage);
                console.log(this.state.pageSize);
            });
            list.forEach(item=>{
                var roles = {...item.roles[0]};
                item.roleName = roles.roleName;
                item.key = item.adminId;
                item.shopId = item.shopId == '0' ? '已启用':'已禁用'
            });
            this.setState({
                tableData:list
            })
        })

    }
    //刷新数据
    refreshTable=(data)=>{
        if(data.code==200){
            this.state.isOperation = false;
            this.state.selectedRowKeys = [];
            if(data.msg){
                message.success(data.msg);
            }
            if(data.data){
                this.setState({
                    tableData:[...data.data]
                })
            }else {
                this.getTableList(this.state.current);
            }
        }else {
            if(data.msg){
                message.error(data.msg);
            }
        }

    };
    //页码改变
    changePage=(page)=>{
        console.log('page',page);
        this.getTableList(page);
        this.setState({
            current:page
        })
    };
    switchChange=(record)=>{
        let changeState = (record.shopId === '已禁用')?'已启用':'已禁用';      //要更改的状态
        var list = this.state.tableData.map(item=>{
            if(item.adminId === record.adminId){
                item.shopId = changeState
            }
            return item;
        });
        this.setState({
            tableData:list
        });
        if(changeState === '已禁用'){     //更改状态为禁用
            this.refs.AcMaTop.disableSelect([record.adminId]);
        }else {    //更改状态为启用
            this.refs.AcMaTop.ableSelect([record.adminId]);
        }
    };
    render() {
        const columns = [
            {
                title: '序号',
                dataIndex: 'adminId',
                key:'adminId'
            }, {
                title: '姓名',
                dataIndex: 'createName',
                key: 'createName',
            }, {
                title: '用户名',
                dataIndex: 'adminName',
                key: 'adminName',
            },{
                title: '角色',
                dataIndex: 'roleName',
                key: 'roleName',
            },{
                title: '状态',
                dataIndex: 'shopId',
                key: 'shopId',
                render:(text,record)=>(
                    <Switch
                        checked={record.shopId=='已禁用'?false:true}
                        onChange={()=>this.switchChange(record)} />
                )
            },{
                title: '最后登录时间',
                dataIndex: 'adminLastLoginTime',
                key: 'adminLastLoginTime',
            },{
                title: '创建时间',
                dataIndex: 'adminCreateTime',
                key: 'operation',
            }, {
                title: '操作',
                dataIndex: 'operation',
                key: 'operation',
                render: (text, record) => (
                    <Space size="middle">
                        <Link to={{pathname:'/setLimit',state:{roleId:record.roles[0].roleId}}}>编辑</Link>
                    </Space>
                ),
            }
        ];
        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <div className='AccoutBox'>
                {/*搜索*/}
                <AcMaTop
                    isOperation={this.state.isOperation}
                    selectedRowKeys={this.state.selectedRowKeys}
                    refreshTable={this.refreshTable}
                    tableData={this.state.tableData}
                    ref='AcMaTop'/>
                {/*table*/}
                <Table
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={this.state.tableData}
                    pagination={{  // 分页
                        simple: false,
                        pageSize:this.state.pageSize,
                        current: this.state.current,
                        total: this.state.totalPage,
                        onChange: this.changePage,
                    }}/>
            </div>
        );
    }
}

export default AccountManage


